<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js9.2作业1  老师写的</title>
		<style type="text/css">
			.one{
				width: 500px;
				border: #006400 solid 1px;
				height: 1600px;
				margin-bottom: 10px ;
			}
		</style>
	</head>
	<body>
		<!--
		写一个高度为2屏的页面。每3秒向下滚动一屏。滚动到页面底部时。向页面增加高度为两屏幕的内容。
		然后定时继续滚动。滚动5次后停止
		-->
		<input type="button" value="点击开始滚动" onclick="beginScroll()" />
		<div class="one">
		</div>
		<script type="text/javascript">
			// 单屏高度
			var oneHeight = screen.height;
			// 得到单词滚动的高度
			var scrollHeight = oneHeight * 2 / 3;
			var scrollYCount = 0;
			var maxCount = 0;
			var divLast = document.getElementsByClassName("one");
			divLast = divLast[divLast.length - 1];
			
			function beginScroll(){
				var timer = setInterval(function(){
					// 当第二轮开始时.每次滚动一屏的高度
					if(maxCount == 1){
						scrollHeight = oneHeight + 20; 
					}
					// 每轮每隔3秒.滚动指定的高度
					scrollYCount = 0;
					while(scrollYCount < 2){
						// 滚动条纵向移动指定像素
						window.scrollBy(0, scrollHeight);
						
						scrollYCount += 1;
						// 延时3秒执行
						sleep(3000)
						console.log("第" + maxCount + "轮, 第" + scrollYCount + "次,当前高度为" + window.scrollY);
					}
					maxCount += 1;
					
					// 当滚动超过6次时停止滚动
					if(maxCount >= 6){
						clearInterval(timer);
					}else if(maxCount < 5){
						// 设置最多添加4次屏幕高度
						document.body.innerHTML += "<div class='one'></div>";
					}
				}, 100);
			}			
			
			// 伪死循环实现延时
			function sleep(delay) {
			  var start = (new Date()).getTime();
			  while ((new Date()).getTime() - start < delay) {
				  continue;
			  }
			}
			
		</script>
		
	</body>
</html>
